<!--
 * @FileDescription: 新增/修改 火炬设施弹窗
 * @Author: 祝小文
 * @Date: 2022-09-27 14:09
 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { emitter } from '@/composables'
import Title from '@/components/title/index.vue'
import upload from '@/components/upload/index.vue'
import DialogPopUp from '@/components/DialogPopUp/index.vue'
import { checkNumberTypeAndLength } from '@/utils/common'
import { queryZdZdmcInfo, queryHjssxxInfo, insertOrUpdateHjssxx } from '@/service/api'

const chemicalStore = useChemicalStore()
const torchFacilities = chemicalStore.productionStorage.torchFacilities

const props = defineProps({
  cjInfo: {
    type: Object,
    default: () => {
      return {}
    },
  }, //采集信息
})

//字典
const syzt: any = chemicalStore.commonDictionaries.syzt

//字段默认值
function fieldDefault() {
  if (props.cjInfo.lx === 'edit') {
    const selectField = ['syzt']
    for (const key in hjssInfo.value) {
      if (selectField.includes(key) && hjssInfo.value[key] === '0') {
        if (key === 'syzt') {
          hjssInfo.value.syzt = syzt[0].zddm
        }
      }
    }
  } else {
    hjssInfo.value.syzt = syzt[0].zddm
  }
}

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

//火炬设施信息
const hjssInfo = ref({
  hjqmc: '',
  syzt: '',
  kzswzsm: '',
  bz: '',
})
//附件信息
const fjxxInfoList = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  },
])
const fileupload = ref()
//必填字段
const requiredNameArr = ['hjqmc', 'syzt', 'rymc', 'ryyddh', 'ryzbdh']
//联系人信息标题
const fzrxxTitleList = [{ kind: '控制室联系人' }]
//联系人信息
const fzrxxInfoList = ref([{ rymc: '', ryyddh: '', ryzbdh: '', rysx: '1' }])

function uploadCuccess(val: any) {
  fjxxInfoList.value = val.value
}
function uploadDelete(val: any) {
  fjxxInfoList.value = val
}

/** 渲染火炬设施信息 */
function loadTorchFacilitiesInfo() {
  queryHjssxxInfo({ key: props.cjInfo.cjId }).then((res: any) => {
    delete res.id //过滤id
    delete res.cjsj //过滤创建时间
    delete res.gxsj //过滤更新时间

    //联系人信息赋值
    const fzrxxData = JSON.parse(JSON.stringify(res.fzrxxInfoList))
    delete res.fzrxxInfoList
    fzrxxInfoList.value.forEach((item: any) => {
      fzrxxData.forEach((el: any) => {
        if (item.rysx === el.rysx) {
          item.id = el.id
          item.rymc = el.rymc
          item.ryyddh = el.ryyddh
          item.ryzbdh = el.ryzbdh
        }
      })
    })

    //附件信息赋值
    fileupload.value.fjxxInfoListsf = res.fjxxInfoList
    fjxxInfoList.value = res.fjxxInfoList
    delete res.fjxxInfoList

    hjssInfo.value = res

    fieldDefault() //字段默认值
  })
}

/** 取消点击事件 */
const cancelClick = () => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  torchFacilities.addTorchFacilitiesShow = false
}

/** 重置点击事件 */
const resetClick = () => {
  hjssInfo.value = {
    hjqmc: '',
    syzt: '',
    kzswzsm: '',
    bz: '',
  }
  fzrxxInfoList.value = [{ rymc: '', ryyddh: '', ryzbdh: '', rysx: '1' }]

  //下拉框默认值
  hjssInfo.value.syzt = syzt[0].zddm
}

/** 保存点击事件 */
const saveClick = () => {
  /** 校验数据非空 Start */
  // let flag = false
  // //基本信息
  // for (const key in hjssInfo.value) {
  //   if (requiredNameArr.includes(key) && !hjssInfo.value[key]) {
  //     console.log(key, '字段未填写')
  //     flag = true
  //   }
  // }
  // //联系人信息
  // fzrxxInfoList.value.forEach((item) => {
  //   for (const key in item) {
  //     if (requiredNameArr.includes(key) && !item[key]) {
  //       console.log(key, '字段未填写')
  //       flag = true
  //     }
  //   }
  // })
  // if (flag) {
  //   return (chemicalStore.FormCheckConfirmShow = true)
  // }
  /** 校验数据非空 End */

  /** 校验数据类型和长度 Strat */
  if (!checkNumberTypeAndLength(fzrxxInfoList.value[0].ryyddh, '手机号', 11)) {
    return
  }
  /** 校验数据类型和长度 End */

  if (
    fjxxInfoList.value.length > 0 &&
    fjxxInfoList.value[fjxxInfoList.value.length - 1].fjlx == ''
  ) {
    fjxxInfoList.value.splice(fjxxInfoList.value.length - 1, 1)
  }
  torchFacilities.addTorchFacilitiesShow = false

  //联系人信息
  fzrxxInfoList.value.forEach((item: any) => {
    item.qyid = qyId.value
    item.sfyx = 1
  })

  // 附件信息
  hjssInfo.value.fjxxInfoList = fjxxInfoList.value.filter((item: any) => item.fjmc !== '')

  const params: any = {
    ...hjssInfo.value,
    fzrxxInfoList: fzrxxInfoList.value,
    qyid: qyId.value,
    sfyx: 1,
  }

  //如果是修改需要传cjid
  if (props.cjInfo.lx === 'edit') {
    params.id = props.cjInfo.cjId
  }

  insertOrUpdateHjssxx(params)
    .then((res: any) => {
      emitter.emit('tabLeft_refreshData') //更新左侧tab统计数量

      //添加
      if (props.cjInfo.lx === 'add') {
        ElMessage.success('新增火炬设施成功')
      }
      //修改
      else if (props.cjInfo.lx === 'edit') {
        ElMessage.success('修改火炬设施成功')
        //需要修改地图要素的标注名称
        window.GScrollWallArray.forEach((item: any) => {
          if (item.name === props.cjInfo.cjId) {
            item.scrollwallLabel.feature3D.setText(hjssInfo.value.hjqmc)
          }
        })
      }
      //刷新数据
      emitter.emit('hj_refreshData')
    })
    .catch((err: any) => {
      if (props.cjInfo.lx === 'add') {
        ElMessage.error('新增火炬设施失败')
      } else if (props.cjInfo.lx === 'edit') {
        ElMessage.error('修改火炬设施失败')
      }
    })
}

/** 如果是修改，需要重新渲染数据 */
watch(
  () => props.cjInfo.cjId,
  (newValue, oldValue) => {
    if (props.cjInfo.lx === 'edit') {
      loadTorchFacilitiesInfo()
    } else {
      resetClick() //重置表单
      fieldDefault() //字段默认值
    }
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>

<template>
  <DialogPopUp
    title="火炬区信息"
    @cancel-click="cancelClick"
    @reset-click="resetClick"
    @save-click="saveClick"
  >
    <!-- 火炬设施基本信息 -->
    <div>
      <Title title-info="基本信息" />
      <el-form label-width="103px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="火炬区名称">
              <el-input v-model.trim="hjssInfo.hjqmc" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用状态">
              <el-select v-model.trim="hjssInfo.syzt" placeholder="请选择">
                <el-option
                  v-for="item in syzt"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="控制室位置说明">
              <el-input v-model.trim="hjssInfo.kzswzsm" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model.trim="hjssInfo.bz" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 联系人信息 -->
    <div>
      <Title title-info="联系人信息" />
      <el-form style="padding-left: 30px">
        <div v-for="(item, index) in fzrxxTitleList" :key="index">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="item.kind" style="margin-bottom: 0"></el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model.trim="fzrxxInfoList[index].rymc" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机">
                <el-input v-model.trim="fzrxxInfoList[index].ryyddh" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="值班电话">
                <el-input v-model.trim="fzrxxInfoList[index].ryzbdh" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>

    <!-- 上传附件 -->
    <div>
      <Title title-info="附件" />
      <upload
        ref="fileupload"
        :upload-title="['火炬设施附件']"
        style="padding-left: 30px"
        @upload-success="uploadCuccess"
        @uploadDelete="uploadDelete"
      />
    </div>
  </DialogPopUp>
</template>

<style lang="less" scoped></style>
